<template>
    <!-- 导航栏 -->
    <nav>
        <!-- 列表渲染链接按钮 -->
        <LinkButton v-for="path,name in pageLinks" 
            :text="name"
            :path="path"
            :width="`width_${name.length}`"
        />
    </nav>
</template>

<script lang="ts" setup>
// 导入链接按钮组件
import LinkButton from './LinkButton.vue';

// 按钮文本-链接路径映射表
const pageLinks={
    'HOME':'/',
    'BROWSE':'browse',
    'SEARCH':'search',
    'DOWNLOAD':'download'
}
</script>

<style lang="scss" scoped>
/* 导航栏样式布局 */
nav{
    width:100%;
    height:10vh;
    top:0;
    display:flex;
    justify-content: center;
    align-items: center;
    border-bottom: 0.4vw white solid;
}
</style>
